<template>
  <div class="rights">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="line-hegiht:45px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格 -->
    <template>
      <el-table
        :data="roleList"
        border
        style="width: 500px">
        <el-table-column
          prop="authName"
          label="权限"
          width="180">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          width="180">
        </el-table-column>
        <el-table-column
          prop="level"
          label="层级">
          <template slot-scope="scope">
            {{scope.row.level | setLevel}}
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import {getRightList} from '@/api/index.js'
export default {
  data () {
    return {
      roleList: []
    }
  },
  mounted () {
    getRightList('list').then(res => {
      this.roleList = res.data
      console.log(res.data)
    })
  },
  methods: {
  },
  filters: {
    setLevel (level) {
      if (level === '0') {
        level = '一级'
      } else if (level === '1') {
        level = '二级'
      } else if (level === '2') {
        level = '三级'
      }
      return level
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #F5F5F5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
